<template>
  <view class="page">
    <view class="page-hd">
      <SearchBox placeholder="搜索商品名称、编号、规格、条码"></SearchBox>
    </view>
    <view class="page-bd">
      <CardView type="box">
        <!-- 盘点任务 -->
        <FormItemView
          :data="{ label: $t('countTask.panDianRenWu'), text: data.taskName }"
        ></FormItemView>
        <view class="ui-line"></view>
        <FormItemView
          :data="{ label: $t('countTask.panDianRen'), text: data.countPerson }"
        ></FormItemView>
      </CardView>

      <!-- 操作栏 -->
      <view class="operate-area m-t--m">
        <view
          class="ui-button button-style--plain"
          @tap="$tab.navigateTo(ROUTE.PAGE_APPS.CHOOSE_GOODS)"
          ><text class="iconfont icon-a-32_32_add"></text
          ><text class="text">选商品</text></view
        >
        <view
          class="ui-button button-style--plain"
          @tap="$tab.navigateTo(ROUTE.PAGE_APPS.SCAN_NUMBER)"
          ><text class="iconfont icon-a-32_32_scanbarcode"></text
          ><text class="text">扫串号</text></view
        >
      </view>

      <!-- 商品信息 -->
      <view class="product-info-block">
        <CardView>
          <template #hd>
            <view class="card-title">
              <text class="text">商品信息</text>
              <view class="operate" @tap="handleOperate">
                <view v-if="!isBatchDelete" class="batch-delete">
                  <text class="icon iconfont icon-a-24_24_trash"></text>
                  批量删除
                </view>
                <view v-else class="completed">完成</view>
              </view>
            </view>
          </template>
          <template #bd>
            <view
              class="product-list"
              :class="{'list--batch-delete': isBatchDelete}"
            >
              <view
                class="product-item"
                v-for="(pItem, pIndex) in 2"
                :key="'pi'+pIndex"
              >
                <view class="product-checkbox" v-show="isBatchDelete">
                  <view class="up-checkbox-cover">
                    <up-checkbox
                      :customStyle="{marginBottom: '8rpx'}"
                      label=""
                      shape="circle"
                      name="agree"
                      usedAlone
                      v-model:checked="aloneChecked"
                      @change="handleCheckbox"
                    >
                    </up-checkbox>
                  </view>
                </view>
                <view class="product-info cover-up-swipe-action">
                  <up-swipe-action>
                    <up-swipe-action-item
                      v-model:show="show"
                      :options="[{ text: '删除' }]"
                    >
                      <view class="swipe-action">
                        <view class="swipe-action__content">
                          <ProductInfoView
                            type="custom"
                            :data="pItem"
                            @onAdd="handleAdd"
                            @onInput="handleInput"
                            @onEdit="handleEdit"
                          >
                            <template #operate>
                              <view
                                class="detail-link"
                                v-if="pIndex % 2 == 0"
                                @tap="handleGoDetail"
                                >明细
                                <view
                                  class="icon iconfont icon-a-16_16_arrow_right"
                                ></view
                              ></view>
                              <NumberBox
                                v-else
                                v-model="quantity"
                                type="icon"
                              ></NumberBox>
                            </template>
                          </ProductInfoView>
                        </view>
                      </view>
                    </up-swipe-action-item>
                  </up-swipe-action>
                </view>
              </view>
            </view>
          </template>
        </CardView>
      </view>
      <!-- 单据附件 -->
      <DocAttachment />
    </view>
    <view class="page-ft">
      <view class="foot__operate-area" v-if="!isBatchDelete">
        <view class="info">
          <text class="iconfont icon-a-32_32_bag"></text>
          <text class="text">共盘点2种，28个</text>
        </view>
        <view class="buttons-wrap">
          <view
            class="ui-button button-function--active"
            @click="handleSaveTheDraft"
            >保存草稿</view
          >
          <view class="ui-button button-style--primary" @click="handleSubmit"
            >提交</view
          >
        </view>
      </view>
      <view class="foot__batch-delete" v-else>
        <view class="delete-all">
          <view class="up-checkbox-cover">
            <up-checkbox
              :customStyle="{marginBottom: '8rpx'}"
              label=""
              shape="circle"
              name="agree"
              usedAlone
              v-model:checked="aloneChecked"
              @change="handleCheckbox"
            >
            </up-checkbox>
          </view>
          全选
        </view>
        <view class="ui-button button-function--delete" @tap="handleDeleteAll"
          >删除</view
        >
      </view>
    </view>

    <view class="delete-modal cover-up-modal">
       <up-modal
         :show="deleteModalVisible"
         :showCancelButton="true"
         confirmText="确认删除"
         @confirm="handleConfirmDelete"
         cancelText="取消"
         @cancel="handleCancelDelete"
       >
        {{ deleteModalMsg }}
       </up-modal>
     </view>
  </view>
</template>

<script setup>
import SearchBox from '@/components/base-components/search-box/search-box.vue';
import CardView from '@/components/base-components/card-view/card-view.vue';
import FormItemView from '@/components/base-components/form-item-view/form-item-view';
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view';
import NumberBox from '@/components/base-components/number-box/number-box.vue';
import DocAttachment from './components/DocAttachment.vue';
import { ROUTE } from '@/constant/constant';

const { proxy } = getCurrentInstance();
const data = ref({
  taskName: '盘点任务名称',
  countPerson: '张三',
});

const isBatchDelete = ref(false);
const quantity = ref(3);
const deleteModalMsg = ref('确认删除这3类商品？');
// 显示：删除弹窗
const deleteModalVisible = ref(false);

const handleOperate = () => {
  isBatchDelete.value = !isBatchDelete.value;
}

// 点击明细
const handleGoDetail = () => {
  console.log('handleGoDetail 去详情');
}

// 保存草稿
const handleSaveTheDraft = () => {
  console.log('handleSaveTheDraft 保存草稿');
  proxy.$tab.navigateTo(ROUTE.PAGE_APPS.OPERATION_RESULT_PAGE, {
    from: 'saveTheDraft',
  })
}

// 提交
const handleSubmit = () => {
  console.log('handleSubmit 提交');
  proxy.$tab.navigateTo(ROUTE.PAGE_APPS.OPERATION_RESULT_PAGE, {
    from: 'submit',
  })
}

// 删除全部
const handleDeleteAll = () => {
  console.log('handleDeleteAll 删除全部');
  deleteModalVisible.value = true;
}

// 确认删除
const handleConfirmDelete = () => {
  console.log('handleConfirmDelete 确认删除');
}

// 取消删除
const handleCancelDelete = () => {
  console.log('handleCancelDelete 取消删除');
}

// 复选框
const aloneChecked = ref(false);
const handleCheckbox = (e) => {
  console.log('handleCheckbox 复选框', e);
}
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";

.page {
  background-color: #F4F8FB;
  ::v-deep {
    .card-view {
      padding: 0 32rpx;
    }

    .form-item-view {
      justify-content: space-between;
      height: 96rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;

      &+.form-item-view {
        border-top: 1px solid $border-color;
      }
    }
  }

  &-hd {
    padding: 16rpx 32rpx;
    background-color: #fff;
  }

  &-bd {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin: 16rpx 32rpx;
  }

  &-ft {
    // display: flex;
    height: 150rpx;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    border-top: 1rpx solid $border-color;
    background-color: #fff;
    .ui-button {
      width: 170rpx;
    }
    .foot {
      &__operate-area {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info {
          color: $text-l3-color;
          font-size: 28rpx;
        }
        .buttons-wrap {
          display: flex;
          gap: 24rpx;
          height: 80rpx;
        }
      }

      &__batch-delete {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .operate-area {
    display: flex;
    padding: 24rpx;
    gap: 24rpx;
    border-radius: 12rpx;
    background-color: #fff;

    .ui-button {
      flex: 1;
      color: $primary-color;
    }
  }
  .card-title {
    display: flex;
    justify-content: space-between;
    padding-top: 24rpx;

    .text {
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 42rpx;
    }

    .batch-delete {
      font-size: 24rpx;
      line-height: 34rpx;
    }
  }
  .card-bd {
    padding-bottom: 24rpx;
  }

  .product {
    &-list {
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      padding-bottom: 24rpx;
    }

    &-item {
      display: flex;
      gap: 24rpx;

      .product-info {
        flex:1;
      }

    }

    // 批量删除状态
    &.list--batch-delete {

    }
  }

  .detail-link {
    color: $text-l3-color;
    font-size: 24rpx;
    line-height: 34rpx;
    display: flex;
    gap: 8rpx;

    .icon {
      font-size: 16rpx;
    }
  }

  // 单据附件
  .doc-attachment-block {
    .card-title {
      font-size: 24rpx;;
    }

    .upload-desc {
      font-size: 24rpx;
      color: $text-l3-color;
    }
  }

  .delete-all {
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: $text-l3-color;
    font-size: 28rpx;
  }

}
</style>
